<template>
  <view>
      <tm-sheet :margin="[20, 20]" :round="3" :shadow="2">
        <view class="user_section_inner">
          <view v-if="userData.is_leader === 1" class="person_charge">
  <!--           修改颜色 todo -->
            <tm-tag text :shadow="0" color="#165DFF" size="m" label="负责人"></tm-tag>
          </view>
          <view class="user_section_item">
            <text class="user_label">姓名</text>
            <text class="user_value">{{userData.real_name}}</text>
          </view>
          <view class="user_section_item">
            <text class="user_label">职位</text>
            <text class="user_value">{{userData.position_text}}</text>
          </view>
          <view class="user_section_item">
            <text class="user_label">手机号</text>
            <text class="user_value">{{userData.phone}}</text>
            <view class="phone_icon" @click="phoneCall"><tm-icon fontSize="32" name="iconfont icon-dianhua"></tm-icon></view>
          </view>
          <view class="user_section_item">
            <text class="user_label">添加时间</text>
            <text class="user_value">{{userData.created_at}}</text>
          </view>

        </view>
      </tm-sheet>
  </view>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps({
  userData: Object
})
const userData = ref<any>(props.userData)
console.log('jp======props',props)
watch(
    () => props.userData,
    (newV) => {
      userData.value = newV
    }
);
const phoneCall = () => {
  uni.makePhoneCall({
    phoneNumber: userData.value.phone //仅为示例
  });
}

</script>

<style lang="scss">
.user_section_inner{
  position: relative;
  .person_charge{
    position: absolute;
    top:-18px;
    right:-17px;
  }
  .user_section_item{
    display: flex;
    padding: 10px 12px;
    position: relative;
    .user_label{
      width: 100px;
      padding-right: 20px;
      font-size: $cus-font-size-14;
      color: $cus-color-1;
    }
    .phone_icon{
      position: absolute;
      top:12px;
      right:10px;
    }
    .user_value{

    }
  }
}

</style>
